<!--
 * @Author: fishroom
 * @Date: 2021-08-19 00:03:24
 * @LastEditTime: 2021-09-03 00:59:35
 * @FilePath: \index\src\views\home\childComps\HotPodcastView.vue
-->
<template>
  <div>
    <title-item>
      <em slot="title" @click="titleClick" class="flex "
        ><i :class="{ iconRatate: flag }" class="mr">&#xe73a;</i
        ><i class="HotPodcast-title">{{ obj.title }}</i></em
      >
      <em slot="text" class="hot-podcast-right">&#xe65c;<i>播放</i></em>
    </title-item>
    <song-slides-4
      :imgs="obj.children"
      :imgClass="SongPushImg"
      :textClass="pushText"
      :swiperOption="swiperOption"
    />
  </div>
</template>

<script>
import TitleItem from "components/content/title/TitleItem.vue";
import SongSlides4 from "components/common/swiper/SongSlides4";
export default {
  name: "HotPodcastView",
  props: {
    obj: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      flag: true,
      SongPushImg: "SongPushImg",
      pushText: "pushText",
      homeSongClass: "h-song-push",
      pageText: "recommend-page-text",
      swiperOption: {
        notNextTick: true,
        //循环
        loop: false,
        //设定初始化时slide的索引
        initialSlide: 0,
        //视图显示个数
        slidesPerView: 1,
        // freeMode: true,
        touchRatio: 2, //触摸变慢
        //自动播放
        autoplay: false,
        //滑动速度
        speed: 1000,
        //滑动方向
        direction: "horizontal",
        paginationClickable: true,
        //小手掌抓取滑动
        grabCursor: true,
        //个体类名替换
        slideClass: "my-slide",
        wrapperClass: "my-wrapper",
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function() {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        }
      }
    };
  },
  components: {
    TitleItem,
    SongSlides4
  },
  methods: {
    titleClick() {
      this.flag = !this.flag;
    }
  }
};
</script>

<style lang="scss">
.flex {
  display: flex;
}

.HotPodcast-title {
  font-size: 18px;
  line-height: 1.8;
}

.iconRatate {
  transform: rotate(720deg);
  transition: all 1.5s linear;
}

.mr {
  margin-right: 6px;
}

.hot-podcast-right {
  padding: 0 10px;
}
</style>
